<div class="pac-page-header">
  <div class="w-full flex flex-row justify-between items-end">
    <div class="flex flex-col">
      <div class="pac-page-title">{{ 'PAC.KEY_WORDS.Certification' | translate: {Default: 'Certification'} }}</div>
      <div class="pac-page-subtitle">{{ 'PAC.KEY_WORDS.DigitalAssetCertificationTypes' | translate: {Default: 'Digital Asset Certification Types'} }}</div>
    </div>
  
    <div class="flex justify-start">
      <div ngmButtonGroup>
        <button mat-raised-button color="primary" (click)="createCertification()">
          {{ 'PAC.ACTIONS.New' | translate: {Default: 'New'} }}
        </button>
      </div>
    </div>
  </div>

  <nav mat-tab-nav-bar class="pac-tab-nav-bar max-w-full" color="accent" mat-align-tabs="start" mat-stretch-tabs="false" disableRipple displayDensity="cosy"
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['.']"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla.isActive"
    >

      <mat-icon class="mr-1" fontSet="material-icons-outlined" displayDensity="cosy">account_tree</mat-icon>
      {{ 'PAC.BUSINESS_AREA.All' | translate: {Default: "All"} }}
    </span>
  </nav>
</div>
<mat-divider></mat-divider>

<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center">
  <div class="w-full flex-1 flex items-start overflow-auto">
    <div class="flex-1 p-4 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 overflow-auto">
      @for (certification of certifications$ | async; track certification.id) {
        <div class="flex flex-col px-4 py-3 border-[0.5px] border-solid border-gray-200 rounded-xl shadow-sm bg-gray-50 hover:bg-white hover:shadow-lg">
          <div class="flex flex-col">
            <div class="text-lg">
              {{ certification.name }}
            </div>
            <div class="text-sm text-text-secondary">
              {{ certification.description }}
            </div>
          </div>

          <div class="flex-1 m-0">
            @if (certification.owner) {
              <pac-user-profile-inline [user]="certification.owner" small />
            }
          </div>

          <div class="w-full flex justify-end">
            <div ngmButtonGroup displayDensity="cosy">
              <button mat-icon-button displayDensity="cosy" class="text-text-secondary" (click)="editCertification(certification)">
                <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
              </button>
              <button mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="text-text-secondary" (click)="removeCertification(certification)">
                <mat-icon fontSet="material-icons-round">delete_forever</mat-icon>
              </button>
            </div>
          </div>
        </div>
      }
    </div>

    <div *ngIf="certification" class="w-[400px] px-8 flex flex-col justify-start items-start">
      <div class="text-lg my-4">
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: 'Edit'} }}
      </div>
      <form [formGroup]="formGroup" class="w-full flex flex-col items-stretch" (ngSubmit)="onSubmit()">
        <mat-form-field appearance="fill">
          <mat-label>{{ 'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} }}</mat-label>
          <input matInput formControlName="name"/>
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>{{ 'PAC.KEY_WORDS.Description' | translate: {Default: 'Description'} }}</mat-label>
          <textarea matInput formControlName="description"></textarea>
        </mat-form-field>

        <ngm-mat-select appearance="fill"
          formControlName="ownerId"
          displayBehaviour="descriptionOnly"
          [label]=" 'PAC.KEY_WORDS.Owner' | translate: {Default: 'Owner'} "
          [selectOptions]="users$ | async">
        </ngm-mat-select>

        <div class="flex items-center gap-2">
          <button mat-raised-button color="primary">
            {{ 'PAC.ACTIONS.Save' | translate: {Default: 'Save'} }}
          </button>
          <button mat-button (click)="cancel($event)">
            {{ 'PAC.ACTIONS.Cancel' | translate: {Default: 'Cancel'} }}
          </button>
        </div>
        
      </form>
    </div>
  </div>
</mat-tab-nav-panel>
